<template>
  <div class="unitRelationMaintain">
    <el-row class="relation_main">
      <el-col class="relation-main-col"
              :span="4">
        <el-col :span="24"
                class="relation_select">
          <el-select v-model="unitType"
                     placeholder="请选择单位"
                     @change="changeType(unitType)"
                     class="unit-select">
            <el-option v-for="item in typeList"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="24"
                class="relation_input">
          <el-input v-model="searchUnit"
                    @input="searchCompany(searchUnit)"
                    placeholder="输入单位名称检索"></el-input>
        </el-col>
        <!-- 左侧单位信息表格 -->
        <el-col :span="24"
                class="relation_table">
          <el-table ref="unitLeftTable"
                    @current-change="handleLeftChange"
                    border
                    :highlight-current-row='true'
                    @row-click='getRowData'
                    :header-cell-style="{background:'#f5f5f5'}"
                    :data="tableData"
                    class="left-table">
            <el-table-column prop="company_name"
                             label="单位信息"
                             align="center">
            </el-table-column>
          </el-table>
        </el-col>
      </el-col>
      <el-col :span="20"
              class="table-container">
        <el-col :span="24"
                align="right"
                class="relation_right">
          <el-col :span="9">
            &nbsp;
          </el-col>
          <el-col :span="12"
                  class="col-12-style">
            <span style="padding-left:26px;padding-right:12px;float:left;height:40px;line-height:40px!important;">单位名称</span>
            <el-input placeholder="请输入单位名称"
                      style="float:left;"
                      v-model="searchkey"> </el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="search_btn"
                       @click="search()">搜索</el-button>
          </el-col>
        </el-col>
        <!-- 右侧数据表格 -->
        <el-col :span="24"
                class="main-right-col">
          <el-table ref="relaTable"
                    @current-change="handleRelaChange"
                    border
                    :highlight-current-row='true'
                    :header-cell-style="{background:'#f5f5f5'}"
                    :data="rightTableData"
                    class="main-right-table">
            <el-table-column label="被关联单位"
                             prop="company_name"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="负责人"
                             prop="contact_name"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="contact_phone"
                             label="负责人电话"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="address"
                             label="所在区域"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="status_name"
                             label="状态"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作"
                             align="center">
              <template slot-scope="scope">
                <el-button type="text"
                           @click="sureDeleteRow(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <!-- 分页 -->
        <el-col :span="24"
                class="relation_page">
          <el-pagination background
                         id="pagination"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-sizes="[10]"
                         :page-size="pagesize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-col>
        <el-col align="right"
                class="right_col">
          <el-button class="search_btn add_relate_btn"
                     icon="el-icon-plus"
                     @click="addUnitDialog=true,addRelate()"
                     v-show="company_id!=''?true:false">新增关联</el-button>
        </el-col>
        <!-- 新增关联弹窗 -->
        <el-dialog :visible.sync="addUnitDialog"
                   title="新增关联"
                   :close-on-click-modal="false"
                   :before-close="handleClose"
                   width="75%">
          <el-row class="unitselect_top">
            <el-col :span="12"
                    align='right'>
              <span>单位类型：</span>
              <el-select v-model="dialogType"
                         class="unit-select-dialog"
                         placeholder="请选择单位类型">
                <el-option v-for="item in unitTypeList"
                           :key="item.value"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="9"
                    align='right'>
              <span>单位名称：</span>
              <el-input v-model="unitName"
                        placeholder="请输入单位名称"
                        class="unit-input-dialog"></el-input>
            </el-col>
            <el-col :span="3"
                    align='right'>
              <el-button class="unit_btn"
                         @click="searchContent()">搜索</el-button>
            </el-col>
          </el-row>
          <el-row class="unitselect_mid">
            <el-table :header-cell-style="{background:'#f5f5f5'}"
                      :data="addUnitTableData"
                      border
                      height="310px"
                      highlight-current-row
                      @selection-change="selectRow"
                      class="unit-table-dialog">
              <el-table-column type="selection"
                               :selectable="selectable"
                               align="center">
              </el-table-column>
              <el-table-column prop="company_name"
                               label="单位名称"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="addr"
                               label="单位地址"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="contact_name"
                               label="负责人"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="contact_phone"
                               label="联系电话"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="create_date"
                               width="180"
                               label="入驻时间"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="操作"
                               align="center"
                               width="80">
                <template slot-scope="scope">
                  <el-button size="mini"
                             type="text"
                             @click="linkToEdit(scope.row)">
                    查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <el-col class="unitselect_bottom"
                    align="center"
                    :span="24">
              <el-pagination id="pagination"
                             background
                             @current-change="relateCurrentChange"
                             :current-page="relateCurrentPage"
                             :page-sizes="[10]"
                             :page-size="pagesize"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="relateTotal">
              </el-pagination>
            </el-col>
          </el-row>
          <el-row class="operate_btn">
            <el-col :span="24"
                    align='center'
                    style="margin-top:20px;">
              <!-- v-show="btnShow" -->
              <el-button class="sure_btn"
                         @click="addUnitDialog=false,dialogType = '',unitName = ''">返回</el-button>
              <el-button class="sure_btn"
                         @click="saveRelate()">确定</el-button>
            </el-col>
          </el-row>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { unitMaintainApi } from "@/services/orgainzeManage"
export default {
  data () {
    return {
      currentLeftRow: null,
      currentRow: null,
      btnShow: false,
      searchUnit: "",//根据单位名称搜索
      unitType: "",//选择单位下拉框绑定的值
      value: "",//搜索框的值
      company_name: "",//单位名称的值
      company_id: "",//单位id
      typeList: [],//选择单位下拉框数据
      tableData: [],
      searchkey: "",
      rightTableData: [],
      currentPage: 1,
      total: 0,
      pagesize: 10,
      editArr: [],
      company_name: "",//删除当前行的公司名
      rela_id: "",//删除当前行的单位关系id
      addUnitDialog: false,//新增关联弹窗
      addUnitTableData: [],//新增关联弹窗表格
      dialogType: "",//新增关联弹窗表格的单位类型值
      unitTypeList: [{ name: "全部", value: "" }],//新增关联弹窗单位类型下拉框
      relateCurrentPage: 1,//新增关联弹窗表格分页当前页
      relateTotal: 0,//新增关联弹窗表格分页总条数
      unitName: "",//新增关联弹窗表格的单位名称
      saveIdArr: [],//存放/新增关联弹窗表格勾选项的id
    }
  },
  methods: {
    //背景色改变-左边
    handleLeftChange (val) {
      this.currentLeftRow = val;
    },
    //默认当前选中的颜色
    setLeftCurrent (row) {
      this.$refs.unitLeftTable.setCurrentRow(row);
    },
    //改变背景色-右边
    handleRelaChange (val) {
      this.currentRow = val;
    },
    //默认当前选中的颜色
    setCurrent (row) {
      this.$refs.relaTable.setCurrentRow(row);
    },
    //新增关联右上角关闭事件
    handleClose (done) {
      done();
      this.dialogType = '';
      this.unitName = '';
      this.relateCurrentPage = 1;

    },
    //获取左侧选择单位下拉框数据
    getSelectList () {
      unitMaintainApi.getTypeList({
        params: {
          code_type: 'companyType',
          is_page: '0'
        }
      }).then(res => {
        this.typeList = res.data.list
        this.unitTypeList = this.unitTypeList.concat(res.data.list)
      }, err => {
        console.log(err)
      })
    },
    //改变下拉框中的值，获取单位信息表格列表数据
    changeType () {
      this.company_id = ""
      unitMaintainApi.getLeftList({
        params: {
          company_type: this.unitType,
          company_name: this.searchUnit,
        }
      }).then(res => {
        if (JSON.stringify(res.data) == '{}') {
          this.tableData = []
        } else {
          this.tableData = res.data;
          //第一行数据添加默认选中的背景色和执行点击事件
          this.getRowData(this.tableData[0]);
          //默认给第一条数据添加背景色
          this.setLeftCurrent(this.tableData[0]);
        }
      }, err => {
        console.log(err)
      })
    },
    //根据单位名称进行检索
    searchCompany (value) {
      if (this.tableData.length != 0) {
        this.changeType()
      } else {

      }

    },
    //点击左侧表格行刷新右侧表格数据(获取id)
    getRowData (row) {
      this.company_id = row.company_id
      this.getRightTable()
    },
    //获取右侧表格列表数据
    getRightTable () {
      unitMaintainApi.getRightList({
        params: {
          company_id: this.company_id,
          is_page: '1',
          company_name: this.searchkey,
          page: this.currentPage,
          page_size: this.pagesize
        }
      }).then(res => {
        this.rightTableData = res.data.list;
        this.total = res.data.total_count;
        if (this.rightTableData.length != 0 || this.rightTableData != undefined) {
          this.setCurrent(this.rightTableData[0]);
        } else {

        }
      }, err => {
        console.log(err)
      })
    },
    //右侧表格分页功能
    handleCurrentChange (page) {
      this.currentPage = page
      this.getRightTable()
    },
    //右侧表格的搜索功能
    search () {
      this.currentPage = 1
      this.handleCurrentChange(this.currentPage)
    },
    //确认删除行
    sureDeleteRow (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.rela_id = row.rela_id;
        this.company_name = row.company_name;
        unitMaintainApi.deleteRow({
          data: {
            rela_id: this.rela_id
          }
        }).then(res => {
          if (res.msg == "SUCCESS") {
            this.$message.success("删除成功！");
            this.getRightTable()
          }
        }, err => {
          console.log(err);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除!'
        });
      });
    },

    //新增关联表格列表
    addRelate () {
      unitMaintainApi.relateTable({
        params: {
          company_id: this.company_id,
          is_page: 1,
          page: this.relateCurrentPage,
          page_size: this.pagesize,
          company_name: this.unitName,
          company_type: this.dialogType
        }
      }).then(res => {
        this.addUnitTableData = res.data.list
        this.relateTotal = res.data.total_count
      }, err => {
        console.log(err)
      })
    },
    //新增关联表格分页功能
    relateCurrentChange (page) {
      this.relateCurrentPage = page
      this.addRelate()
    },
    //新增关联表格搜索功能
    searchContent () {
      this.relateCurrentPage = 1
      this.relateCurrentChange(this.relateCurrentPage)
    },
    //新增关联表格限制勾选(设置is_select状态为'1'的不能被勾选)
    selectable (row) {
      if (row.is_select == 1) {
        return false
      } else {
        return true
      }
    },
    //新增关联表格勾选事件
    selectRow (selection) {
      this.saveIdArr.length = 0
      for (var i = 0; i < selection.length; i++) {
        this.saveIdArr.push(selection[i].company_id)
      }
      if (this.saveIdArr.length == 0) {
        this.btnShow = false
      } else {
        this.btnShow = true
      }
    },
    //点击确定按钮，保存新增的关联
    saveRelate () {
      //console.log('this.saveIdArr======', this.saveIdArr)
      if (this.saveIdArr.length == 0) {
        this.$message('请先勾选数据!');
      } else {
        unitMaintainApi.saveRelate({
          data: {
            company_id: this.company_id,
            company_ids: this.saveIdArr.join(',')
          }
        }).then(res => {
          if (res.msg == "SUCCESS") {
            this.$message.success("添加成功！");
            this.addUnitDialog = false
            this.getRightTable()
            this.saveIdArr.length = 0
          }
        }, err => {
          console.log(err)
        });
      }

    },
    //跳转到修改单位页面
    linkToEdit (row) {
      this.$router.push({ path: '/editUnit', query: { org_id: row.company_id } })
    },
  },
  created () {
    this.getSelectList()
  }
}
</script>
<style lang="scss" scoped>
.col-12-style /deep/ .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 79%;
}
.unitRelationMaintain {
  height: 100%;
  background: #fff;
}
.relation_main {
  padding: 20px 0px;
  min-height: 550px;
  height: 100%;
  .relation-main-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
  }
  .table-container {
    padding-right: 20px;
    padding-left: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
.relation_select {
  //padding: 0 20px;
  margin-bottom: 10px;
  margin-top: 60px;
}
.unit-select {
  width: 100%;
}
.left-table {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
}
.s_content {
  width: 300px;
}
.main-right-col {
  margin-bottom: 20px;
  height: 100%;
}
.main-right-table {
  width: 100%;
  height: 100%;
}
/deep/ .unitselect_mid .el-table__body tr.current-row > td {
  background: #1890ff;
  color: #fff;
}
/deep/ .unitselect_mid .el-table__body tr.current-row > td .el-button {
  color: #fff;
}
/deep/ .main-right-table .el-table__body tr.current-row > td {
  background: #1890ff;
  color: #fff;
}
/deep/ .main-right-table .el-table__body tr.current-row > td .el-button {
  color: #fff;
}
.unit-select-dialog {
  width: 56%;
}
.unit-input-dialog {
  width: 75%;
}
.unit-table-dialog {
  width: 100%;
}
/deep/ .left-table .el-table__body tr.current-row > td {
  background: #1890ff;
  color: #fff;
}

.relation_table {
  padding-right: 0px;
  height: 100%;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
}
.relation_input {
  margin-bottom: 10px;
}
.relation_right {
  //padding: 0 20px;
  margin-bottom: 20px;
  //background:red;
}
.relation_right .el-input-group__append {
  background: none !important;
}
.search_btn {
  background: #1abc9c !important;
  color: #fff !important;
}
.unit_btn {
  background: #1abc9c !important;
  color: #fff !important;
  width: 100% !important;
}
.relation_page {
  padding-bottom: 20px;
  text-align: center;
}
.right_col {
  padding: 0 20px;
}
/deep/ #pagination .el-pager .active {
  background: #1abc9c;
}
/deep/ #pagination .el-pager .active:hover {
  color: #fff;
}
/deep/ #pagination .el-pager li:hover {
  color: #1abc9c;
}
.normal_btn {
  background: #1abc9c;
  color: #fff;
}
.delete_span {
  font-size: 16px;
  color: #1890ff;
  font-size: 16px;
}
.normal_span {
  font-size: 16px;
}
.unitselect_top {
  margin-bottom: 20px;
}
.unitselect_mid {
  margin-bottom: 15px;
}
.sure_btn {
  width: 80px;
  color: #fff;
  background: #1abc9c;
}
/deep/ .add_relate_btn {
  padding: 12px;
}
</style>
